<template>
	<view class="login-container">
		<view class="logo">
			<image src="/static/logo.png" mode="aspectFit"></image>
		</view>
		
		<view class="form-container">
			<view class="form-item">
				<text class="label">用户名</text>
				<input type="text" v-model="formData.username" placeholder="请输入用户名" class="input" />
			</view>
			
			<view class="form-item">
				<text class="label">密码</text>
				<input type="password" v-model="formData.password" placeholder="请输入密码" class="input" />
			</view>
			
			<button class="login-btn" type="primary" @tap="handleSubmit">登录</button>
			
			<view class="register-link">
				<text>还没有账号？</text>
				<text class="link" @click="goToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions, mapGetters } from 'vuex'
	import { login, getUserInfo } from '@/api/user.js'
	
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				from: ''
			}
		},
		onShow() {
			// 检查是否已登录
			if (this.isLogin) {
				// 已登录则跳转到首页
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				})
			}
		},
		onLoad(options) {
			if (options && options.from) {
				this.from = options.from
			}
		},
		computed: {
			...mapGetters('user', ['isLogin'])
		},
		methods: {
			...mapActions('user', ['setToken', 'setUserInfo']),
			async handleSubmit() {
				// 表单验证
				if (!this.formData.username || !this.formData.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					})
					return
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '登录中...',
					mask: true
				})
				
				try {
					// 登录请求
					const res = await login({
						username: this.formData.username,
						password: this.formData.password
					})
					
					// 登录失败时直接抛出异常并显示后端msg
					if (!res || res.code !== 200) {
						throw res;
					}
					
					// 保存token
					uni.setStorageSync('token', res.token)
					this.$store.commit('user/SET_TOKEN', res.token)
					
					// 获取用户信息
					const userInfo = await getUserInfo()
					
					// 保存用户信息
					uni.setStorageSync('userInfo', userInfo.user)
					this.$store.commit('user/SET_USER_INFO', userInfo.user)
					
					// 显示成功提示
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					// 返回上一页或跳转到首页
					setTimeout(() => {
						if (this.from === 'profile') {
							uni.switchTab({
								url: '/pages/tabbar/user/user'
							})
						} else {
							const pages = getCurrentPages()
							if (pages.length > 1) {
								uni.navigateBack()
							} else {
								uni.switchTab({
									url: '/pages/tabbar/home/home'
								})
							}
						}
					}, 1500)
				} catch (error) {
					uni.hideLoading()
					// 优先显示后端返回的msg字段
					let msg = (error && error.msg) || (error && error.message) || '登录失败，请检查网络';
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
			},
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			}
		}
	}
</script>

<style>
	.login-container {
		padding: 40rpx;
		min-height: 100vh;
		background-color: #fff;
	}
	
	.logo {
		text-align: center;
		margin: 60rpx 0;
	}
	
	.logo image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.form-container {
		margin-top: 40rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.login-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin-top: 60rpx;
	}
	
	.login-btn:active {
		opacity: 0.8;
	}
	
	.register-link {
		text-align: center;
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.link {
		color: #007AFF;
		margin-left: 10rpx;
	}
</style> 